"use client"
import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Popconfirm, message, Tabs } from 'antd';
import Modal from './Modal'
import dayjs from 'dayjs'

import { getUsers,updUser } from '@/api/usersApi'
import { delConversationList } from '@/api/conversationApi'
export default function Home() {
    const [data, setData] = useState([]);

    const Init = async () => {
        const res = await getUsers()
        if (res?.flag) { setData(res.data) }
    }
    useEffect(() => {
        Init()
    }, [])
    // 清空会话
    const confirm = async (id: string) => {
        await delConversationList({ admin: 'admin', userID:id })
    };
    // 弹窗
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [modelPrpos, setModelPrpos] = useState({});

    const columns = [
        {
            title: '用户名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '管理员',
            dataIndex: 'admin',
            key: 'admin',
            render: (_: any) => 'admin'
        },
        {
            title: '提问时间',
            dataIndex: 'password',
            key: 'password',
            render: (_: any) => dayjs(_).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '处理进度',
            key: 'state',
            dataIndex: 'state',
            render: (_: any, record: any) => (
                _ === 0 ? (
                    <Tag color='volcano' key={_}>
                        待处理
                    </Tag>
                ) :
                    (_ === 1 && record.remainingDuration > 0) ? (
                        <Tag color='green' key={_}>
                            已处理
                        </Tag>
                    ) : (
                        <Tag color='geekblue' key={_}>
                            跟进中
                        </Tag>
                    )
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <Button type="primary" size='small' className={record.newMessage ? 'dot' : ''} style={{ position: 'relative' }} onClick={() => {
                        setIsModalOpen(true);
                        setModelPrpos({ userInfo: record, name: record.name, type: 0 })
                        updUser({ _id: record._id, newMessage: false })
                        Init()
                    }}>进入会话</Button>
                    <Popconfirm
                        title="是否清空该会话?"
                        onConfirm={() => confirm(record._id)}
                        okText="是"
                        cancelText="否"
                    >
                        <Button color="danger" variant="solid" size='small'>清空会话</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    return (
        <>
            <Table columns={columns} dataSource={data} rowKey={(record: any) => record._id} />
            <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} modelPrpos={modelPrpos} refreshList={Init} />
        </>
    );
};
